import React, { useState, useEffect } from "react";
import { connect } from "react-redux";
import { Navigate, Outlet, useLocation } from "react-router-dom";
import { Layout, Button, Modal, Avatar } from "antd";
import {
  FullscreenOutlined,
  FullscreenExitOutlined,
  QuestionCircleOutlined,
  UserOutlined,
} from "@ant-design/icons";
import "./css/admin.css";
import screenfull from "screenfull";
import dayjs from "dayjs";
import { deleteUserInfo } from "../../redux/action_creators/login_action";
import axios from "axios";

import Nav from "../nav/nav";

const { Header, Footer, Sider, Content } = Layout;
const { confirm } = Modal;

function Admin(props) {
  const [isFull, setFull] = useState(false);
  const [date, setDate] = useState(dayjs().format("YYYY年 MM月DD日 HH:mm:ss "));
  const { userInfo, deleteUserInfo } = props;
  const location = useLocation();
  let [userDetail, setUserDetail] = useState({ name: "", avatar_url: "" });

  const reqUserDetail = async () => {
    const responce = await axios.get("http://api.shop.eduwork.cn/api/user", {
      headers: {
        Authorization: userInfo.token,
      },
    });

    setUserDetail(responce.data);
  };

  useEffect(() => {
    setInterval(() => {
      setDate((date) => dayjs().format("YYYY年 MM月DD日 HH:mm:ss "));
    }, 1000);
    // eslint-disable-next-line
  }, [date]);

  useEffect(() => {
    reqUserDetail();
    // eslint-disable-next-line
  }, []);

  const logOut = () => {
    confirm({
      icon: <QuestionCircleOutlined />,
      title: "This is an confirm message",
      content: "是否确认退出登入？",
      okText: "确认",
      cancelText: "取消",

      onOk() {
        deleteUserInfo();
      },

      onCancel() {},
    });
  };

  // 切换全屏
  const fullScreen = () => {
    screenfull.toggle();
    setFull((isFull) => !isFull);
  };
  if (!userInfo.isLogin) {
    return <Navigate to="/login" />;
  }
  return (
    <Layout className="layout ">
      <Sider className="sider">
        <Nav></Nav>
      </Sider>
      <Layout className="section">
        <Header className="header">
          <div className="header-top">
            <Button size="small" onClick={fullScreen}>
              {isFull ? (
                <FullscreenExitOutlined className="screenicon" />
              ) : (
                <FullscreenOutlined className="screenicon" />
              )}
            </Button>

            <label>
              <Avatar
                className=" avatar"
                style={{
                  backgroundColor: "#87d068",
                }}
                size="small"
                icon={<UserOutlined />}
              />
              {userDetail.name}
            </label>
            <span onClick={logOut} className="logout">
              退出
            </span>
          </div>
          <div className="header-bottom">
            <div className="header-bottom-left">
              {location.pathname.indexOf("product") !== -1
                ? "product"
                : location.pathname.split("/").reverse()[0]}
            </div>
            <div className="header-bottom-right">
              {date}
              <img
                src="http://api.map.baidu.com/images/weather/day/qing.png"
                alt="weather"
              />
              晴 温度:30~36℃
            </div>
          </div>
        </Header>
        <Content className="content">
          <Outlet />
        </Content>
        <Footer className="footer">
          Andrea Design ©2022 Created by Andrea Liu
        </Footer>
      </Layout>
    </Layout>
  );
}

export default connect((state) => ({ userInfo: state.userInfo }), {
  deleteUserInfo,
})(Admin);
